'use strict';

import React, { Component } from 'react';

import {
  StyleSheet,
  PixelRatio,
  ART,
  View,
  Text
} from 'react-native';

const {Surface, Shape, Path} = ART;

import {NavigationBar} from 'react-native-navigator'
import List from './list'

const suports = [
  'Symbol',
  'Map',
  'Set',
  'WeakMap',
  'WeakSet',
  'WeakMap',
  'Proxy',
  'Promise',
  'JSON',
  'URL',
  'URLSearchParams',
  'FormData',
  'ArrayBuffer',
  'Uint8Array',
  'Window',
  'window',
  'XMLHttpRequest',
  'fetch',
  'FileReader',
  'WebSocket',
  'Worker',
  'Request',
  'Response',
  'encodeURI',
  'decodeURI',
  'encodeURIComponent',
  'decodeURIComponent',
  'btoa',
  'atob'
];

class ENVSupport extends Component {
  constructor(props) {
    super(props);
  
    this.state = {
      supports: {
        forEach: !!Array.prototype.forEach,
        map: !!Array.prototype.map,
        reduce: !!Array.prototype.reduce,
        iterator: 'Symbol' in global && 'iterator' in Symbol,
        Blob: 'FileReader' in global && 'Blob' in global && (function() {
          try {
            new Blob()
            return true
          } catch(e) {
            return false
          }
        })(),
        ... suports.concat([{}]).reverse().reduce((previous, current)=>{
              previous[current] = current in global;
              return previous;
            })
      }
    };
  }
  render() {
    return (
      <View style={styles.container}>
        <NavigationBar navigator={this.props.navigator} title='ENVSupport'/>
        <List contentContainerStyle={styles.func_list}>
        {Object.keys(this.state.supports).reverse().map((s, i)=>{
          return (
            <View key={i} style={{flex: 1, flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center',}}>
              <Text>{s}</Text>
              <YesNo style={styles.accessor} yes={this.state.supports[s]}/>
            </View>
          );
        })}
        </List>
      </View>
    );
  }
}

class YesNo extends Component {
  render() {
    return(
      <View style={this.props.style}>
      <View style={{flex: 1, margin: 3, backgroundColor: this.props.yes ? '#53D769' : 'gray'}}/>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#F5FCFF',
  },
  func_list: {
    paddingTop: 78,
    paddingBottom:13,
  },
  accessor: {
    width: 18,
    height: 18,
    borderWidth: 1/PixelRatio.get(),
    borderColor: 'gray'
  }
});


export default ENVSupport;